{% extends 'public/layout.html' %}


{% block breadcrumb %}
     <ol class="breadcrumb">
        <li>
            <a href="{% url 'index' %}">首页</a>
        </li>
         <li>
             <a>用户管理</a>
         </li>
        <li class="active">
            <strong>用户权限管理</strong>
         </li>
    </ol>
{% endblock %}
{% block body %}
<div class="row">
    <div class="col-lg-10">
        <div class="ibox float-e-margins">
            <h5>用户组管理</h5>

            <div class="ibox-content">
                 <form method="post" action="{% url 'user_group' %}" class="form-horizontal">
                        <input type="hidden" value='{{uid}}' name="uid">  <!--update need id-->

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">权限：</label>
                            <!--待选择区域-->
                            <div class="col-sm-4">
                                <select id="groups" name ="groups" class="form-control m-b" multiple size="12">
                                {% for group in user_not_groups %}
                                    <option value="{{ group.id }}" >{{ group.name }}</option>
                                {% endfor %}
                                </select> 
                            </div>

                            <!--中间选择箭头-->
                            <div class="col-sm-1">
                                <div class=" btn-group" style="margin-top: 70px;">
                                     <button type="button" class="btn btn-white" onclick="move('groups', 'groups_selected')"><i class="fa fa-chevron-right"></i></button>
                                    <button type="button" class="btn btn-white" onclick="move('groups_selected', 'groups')"><i class="fa fa-chevron-left"></i> </button>
                                </div> 
                            </div>

                            <!--x选中区域-->
                            <div class="col-sm-3">
                                     <div>
                                         <select id="groups_selected" name="groups_selected" class="form-control m-b" size="12"  multiple>
                                             {% for group in user_has_groups %}
                                            <option value="{{ group.id }}" >{{ group.name }}</option>
                                            {% endfor %}                                                                       
                                         </select>
                                    </div> 
                            </div>
                         </div> <!--end form-group-->


                       <div class="hr-line-dashed"></div>
                       <div class="form-group">
                             <div class="col-sm-4 col-sm-offset-2">
                                 <button class="btn btn-white" type="reset">取消</button>
                                 <button id="submit_button" class="btn btn-primary" type="submit">确认</button>
                            </div>  
                       </div>
                </form>
            </div>


        </div>
    </div>
</div>
{% endblock %}
{% block js %}
<script>
function move(from, to, from_o, to_o) {
    $("#" + from + " option").each(function () {
        if ($(this).prop("selected") == true) {
            $("#" + to).append(this);
            if( typeof from_o !== 'undefined'){
                $("#"+to_o).append($("#"+from_o +" option[value='"+this.value+"']"));
            }
          }
    });
}

</script>
{% endblock %}
